<template>
  <div class="view-wrapper">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="客户名称：" prop="clientName">
          <el-input v-model="queryParams.clientName" placeholder="请输入" clearable style="width: 260px;" />
        </el-form-item>
        <el-form-item label="付款时间：">
          <el-date-picker clearable v-model="date" type="daterange" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            @change="changeTime" placeholder="请选择">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="listBox_head" style="margin: 0 0 20px">
        <div class="div_title">
          <div class="div_title1">
            回款商户数：{{ clientNum }}
          </div>
          <div class="div_title2">
            回款笔数：{{ num }}
          </div>
          <div class="div_title3">
            回款金额：{{ payMoney }}（元）
          </div>
        </div>
        <export-excel-button title="回款数据总汇" action="/client/receipt/record/all/list/export"  :params="queryParams" v-hasAuth="'client:receipt:record:export'"/>
      </div>
      <el-table v-loading="loading" ref="multipleTable" :data="tabList" stripe border tooltip-effect="dark"
        style="width: 100%">
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="客户名称" align="center" prop="clientName"></el-table-column>
        <el-table-column label="提交时间" align="center" prop="createTime"></el-table-column>
        <el-table-column label="付款时间" align="center" prop="payTime"></el-table-column>
        <el-table-column label="付款方式" align="center" prop="payType"></el-table-column>
        <el-table-column label="付款金额（元）" align="center" prop="payMoney"></el-table-column>
        <el-table-column label="付款说明/备注" align="center" prop="remark"></el-table-column>
        <el-table-column label="上传责任人" align="center" prop="nickName"></el-table-column>

        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="seeClick(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList"></pagination>
    </div>
    <!-- 新增编辑弹窗 -->
    <!-- <AddDialog v-if="dialogVisible" :id="dialogId" :pathType="pathType" :visible.sync="dialogVisible" @success="_handleSuccess">
      </AddDialog> -->
      
    <RefundDialog v-bind="$attrs" v-if="dialogVisible" :clientId="queryParams.clientId" :refundId="refundId" :clientName="clientName" :pathType="pathType" :visible.sync="dialogVisible" @success="_handleSuccess">
    </RefundDialog>
  </div>
</template>

<script>
import {
  receiptList,
  receiptListCount
} from "@/api/customer/serviceData";
import RefundDialog from "@/views/customer/management/customerFile/components/RefundDialog";
import ExportExcelButton from "@/components/ExportExcelButton/index";
export default {
  name: "",
  components: {
    // AddDialog,
    ExportExcelButton,
    RefundDialog
  },
  data() {
    return {
      dialogId: '',
      dialogVisible: false,
      watchVisible: false,
      // 遮罩层
      loading: false,
      // 导出遮罩层
      // 总条数
      total: 0,
      //表格数据
      tabList: [],
      date: [],
      pathType: 'add',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        beginTime: '',
        endTime: '',
        clientName: ''
      },
      num:'',
      clientNum:'',
      payMoney:'',
    };
  },
  computed: {

  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      receiptList(this.queryParams).then(response => {
        this.tabList = response.result.records;
        this.total = response.result.total;
        this.loading = false;
      });
      receiptListCount(this.queryParams).then(response => {
        this.num = response.result.num
        this.clientNum = response.result.clientNum
        this.payMoney = response.result.payMoney
      });
    },
    // 表单重置
    reset() {
      this.date = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        beginTime: '',
        endTime: '',
        clientName: ''
      };
      this.resetForm("queryParams");
      this.handleQuery()
    },
    //处理时间
    changeTime(e) {
      console.log(e)
      if (e != null) {
        this.queryParams.beginTime = e[0]
        this.queryParams.endTime = e[1]
      } else {
        this.queryParams.beginTime = ''
        this.queryParams.endTime = ''
      }
    },
    //查看
    seeClick(row) {      
      this.refundId = row.id
      this.dialogVisible = true
      this.pathType = 'look'
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.reset();
    },
    _handleSuccess(e) {
      //成功回调
      // this.resetQuery()
      this.getList()
    },

  }
};

</script>
<style scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px 0;
}

.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px;
  margin-top: 10px;
}

.listBox_head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.img_box {
  width: 100px;
  height: 80px;
  border-radius: 4px;
}

.div_title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}


.div_title2 {
  margin-left: 40px;
}

.div_title3 {
  margin-left: 40px;
}
</style>